<template>
  <div v-if="isgenerateBlog" class="PPT" @mouseup="MicrophoneActive = false">
    <h3><span></span><span>博客生成</span></h3>
    <p class="introduce">根据用户指定的笔记,自动生成结构清晰、高质量的博客文章,帮助用户快速发布博客。</p>
    <el-card class="PPT-card-content">
      <span>添加笔记</span>
      <span> (必填项)</span>
      <div class="searchParam">
        <div>
          <span>时间</span>
          <div class="dateClass">
            <el-date-picker v-model="fromData.dateRange" type="datetimerange" start-placeholder="开始时间"
                            end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                            time-format="A hh:mm:ss" />
          </div>
        </div>
        <div class="addrClass">
          <span>地点</span>
          <el-input class="textareaInput" resize="none" v-model="fromData.addr" placeholder="例如:北京市" clearable
                    size="large">
          </el-input>
        </div>
        <div class="aiSearch">
          <span>AI搜索关键信息</span>
          <el-input :prefix-icon="Search" class="aiSearchInput" resize="none" v-model="fromData.searchStr"
                    placeholder="上周的工作笔记" size="large">

            <template #suffix>
              <el-button class="btn" type="primary" @click="searchNoteAI">AI搜索</el-button>
            </template>
          </el-input>
        </div>
      </div>
      <el-divider />
      <div class="noteClass">
        <span>已添加笔记</span>
        <span style="margin-left: auto;" @click="openNoteList"><img src="@/icons/添加笔记.svg" alt="点击插入图片"
                                                                    @click="addBJ" /></span>
      </div>
      <div class="noteCard">
        <div class="cardList">
          <div class="cardItem" v-for="(item, index) in noteList">
            <div class="cardHeader">
              <span>{{ moment(item.create_time).format('MM/DD HH:mm') }}</span>
              <span>北京市</span>
            </div>
            <div class="text">
              笔记标题—{{ item.file_name }}
            </div>
            <span class="icon-item" @click="clearNote(index)" style="opacity: .2;">
              <img src="@/icons/清除.svg" />
            </span>
          </div>
        </div>
      </div>
      <div class="PPT-card-button">
        <el-button class="submit" @click="submit" type="primary">生成</el-button>
      </div>
    </el-card>
    <!-- 添加笔记 -->
    <el-dialog align-center v-model="addBJdialog" style="height: 700px; ">
      <div class="myNode">
        <div class="title"><span class="icon-myNode"></span><span class="text">我的笔记</span></div>
        <div class="header">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
            全部
          </el-checkbox>
          <el-button round><span class="icon-loudou"></span><span class="text" @click = "openQueryNote">AI筛选</span></el-button>
        </div>
        <el-scrollbar height="550px">

          <div class="NodeList">
            <el-checkbox-group @change="handleCheckedCitiesChange" v-model="selectedNoteList">
              <div class="NodeItem" v-for="item in searchNote">
                <div class="title">
                  <el-checkbox :value="item"> </el-checkbox>
                  <div class="time">{{ moment(item.create_time).format('MM/DD HH:mm') }}</div>
                  <div class="city">北京市</div>
                </div>
                <div class="content">笔记标题———{{ item.file_name }}</div>
              </div>
            </el-checkbox-group>
          </div>
        </el-scrollbar>

        <div height="50px" class="search-button">
          <el-button @click="close" plain type="primary">取消</el-button>
          <el-button @click="checkNote" plain type="primary">确定</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog align-center v-model="queryShow" style="height: 500px; ">
      <div class="myQuery">
        <div class="title"><span class="icon-myNode"></span><span class="text">筛选</span></div>
        <el-scrollbar height="450px">
          <div class="searchDate">
            <span>时间</span>
            <div class="dateClass">
              <el-date-picker v-model="searchNoteFrom.dateRange" type="datetimerange" start-placeholder="开始时间"
                              end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                              time-format="A hh:mm:ss" />
            </div>
          </div>
          <div class="searchAddr">
            <span>地点</span>
            <div class="addrClass">
              <el-input class="textareaInput" resize="none" v-model="searchNoteFrom.addr" placeholder="例如:北京市" clearable
                        size="large">
              </el-input>
            </div>
          </div>
          <div class="searchAI">
            <span>AI搜索关键信息</span>
            <div class="AIClass">
              <el-input class="textareaInput" resize="none" v-model="searchNoteFrom.searchStr" placeholder="上周的工作笔记" clearable
                        size="large">
              </el-input>
            </div>
          </div>
        </el-scrollbar>
        <div height="50px" class="search-button">
          <el-button @click="queryShowClose" plain type="primary">取消</el-button>
          <el-button @click="queryShowSearch" plain type="primary">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
  <generateBlog @back="setGenerateBlog(true)" :search="search" :filePaths="dataList.toString()" v-else />
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import {useBlogStore} from '@/stores/index'
import moment from "moment";
import GenerateBlog from "@/views/PocketAI/components/generateBlog.vue";
import { storeToRefs } from 'pinia'
import {filtration, listNote} from "@/api/index.js";
const search = ref('请按以下笔记帮我生成博客')
const MicrophoneActive = ref(false)
const FileDialog = ref(false)
const stro = useBlogStore()
const { isgenerateBlog } = storeToRefs(stro)
const { setGenerateBlog } = stro
const dataList = ref([])
const noteList = ref([])
const selectedNoteList = ref([])
const searchNote = ref([])
const dialogFormVisible = ref(false)
const addBJdialog = ref(false)
const checkAll = ref(false)
const isIndeterminate = ref(false)
const queryShow = ref(false)


const fromData = ref({
  title: '',
  dateRange: '',
  addr: '',
  searchStr: '',
  startTime:'',
  endTime:''
})


const searchNoteFrom = ref({
  title: '',
  dateRange: '',
  addr: '',
  searchStr: '',
  startTime:'',
  endTime:''
})

onMounted(() => {
  setGenerateBlog(true)
})
const handleCheckAllChange = (val) => {
  selectedNoteList.value = val ? searchNote.value : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value) => {
  console.log(value)
  const checkedCount = value.length
  checkAll.value = checkedCount === searchNote.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < searchNote.value.length
}
const download = (fileList) => {
  dataList.value = fileList
  FileDialog.value = false
}
//添加笔记
const addBJ = async () => {
  selectedNoteList.value = noteList.value

  addBJdialog.value = true
  const data = await filtration({
    start_time_str: "",
    end_time_str: "",
    address: "",
    content:""
  })
  searchNote.value = data.data

  checkAll.value = searchNote.value.length === noteList.value.length
}

const checkNote = () =>{
  noteList.value = selectedNoteList.value
  addBJdialog.value = false
}

const close = () =>{
  addBJdialog.value = false
}
const openNoteList = () => {
  dialogFormVisible.value = true
}

const clearNote = (index) => {
  noteList.value.splice(index, 1)
}

const searchNoteAI = async () => {
  if(fromData.value.dateRange[0] !== undefined){
    fromData.value.startTime = moment(new Date(fromData.value.dateRange[0])).format('YYYY-MM-DD HH:mm:ss')
  }
  if(fromData.value.dateRange[1] !== undefined){
    fromData.value.endTime = moment(new Date(fromData.value.dateRange[1])).format('YYYY-MM-DD HH:mm:ss')
  }
  const data = await filtration({
    start_time_str: fromData.value.startTime,
    end_time_str: fromData.value.endTime,
    address: fromData.value.addr,
    content:fromData.value.searchStr
  })
  noteList.value = data.data
}
const submit = () => {
  noteList.value.forEach(item => {
    dataList.value.push("/DATA/notes/" + item.file_name)
  })
  setGenerateBlog(false)
}

const queryShowClose = async () => {
  queryShow.value = false
  addBJdialog.value = true
}
const openQueryNote = () =>{
  queryShow.value = true
  addBJdialog.value = false
}
const queryShowSearch = async () => {
  if(searchNoteFrom.value.dateRange != null) {
    if (searchNoteFrom.value.dateRange[0] !== undefined) {
      searchNoteFrom.value.startTime = moment(new Date(searchNoteFrom.value.dateRange[0])).format('YYYY-MM-DD HH:mm:ss')
    }
    if (searchNoteFrom.value.dateRange[1] !== undefined) {
      searchNoteFrom.value.endTime = moment(new Date(searchNoteFrom.value.dateRange[1])).format('YYYY-MM-DD HH:mm:ss')
    }
  }
  const data = await filtration({
    start_time_str: searchNoteFrom.value.startTime,
    end_time_str: searchNoteFrom.value.endTime,
    address: searchNoteFrom.value.addr,
    content:searchNoteFrom.value.searchStr
  })
  searchNote.value = data.data
  queryShow.value = false
  addBJdialog.value = true
}
</script>

<style lang="scss" scoped>
.PPT {
  width: 100%;
  height: 100%;
  padding: 30px;

  h3 {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    span {

      display: flex;

      &:nth-child(1) {
        height: 20px;
        width: 20px;
        margin-right: 5px;
        background: url('@/icons/博客生成.svg') no-repeat center;
      }
    }
  }

  .introduce {
    color: #333;
    width: 100%;
    text-align: center;
    font-family: "Microsoft YaHei UI";
    font-size: 14px;
    margin-top: 11px;
  }


  .PPT-card-content {
    width: 100%;
    margin-top: 10px;
    padding: 20px;
    height: 800px;

    span {
      &:nth-child(1) {
        color: #191919;
        font-size: 16px;
        font-weight: 800;
      }

      &:nth-child(2) {
        color: #999;
        font-size: 14px;
      }
    }

    .searchParam {
      margin-top: 10px;
      display: flex;

      span {
        font-size: 14px;
      }

      .dateClass {
        margin-top: 10px;
        width: 100%
      }

      .addrClass {
        margin-left: 30px;
        width: 30%;

        .textareaInput {
          width: 100%;
          margin-top: 10px;
          font-size: 16px
        }
      }

      .aiSearch {
        margin-left: 30px;
        width: 35%;

        .aiSearchInput {
          width: 100%;
          margin-top: 10px;
          font-size: 16px
        }
      }
    }

    .noteClass {
      width: 100%;
      margin-top: 10px;
      display: flex;

      span {
        font-size: 14px;
      }
    }

    .noteCard {
      .cardList {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 450px;
        overflow: hidden;
        overflow-y: auto;
        align-content: flex-start;

        .cardItem {
          width: 23%;
          background-color: #F2F4F9;
          margin-top: 10px;
          height: 90px;
          border-radius: 6px;
          padding-top: 15px;
          position: relative;

          .icon-item {
            position: absolute;
            right: 0px;
            top: 0px;
          }

          .cardHeader {
            color: #666;
            display: flex;
            width: 100%;
            padding: 0 10px;
            padding-right: 20px;
            justify-content: space-between;
            font-family: "PingFang SC";
            font-size: 12px;

          }

          .text {
            font-size: 14px;
            overflow: hidden;
            margin-top: 12px;
            width: 100%;
            padding: 0 10px;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
      }
    }

    .PPT-card-button {
      width: 100%;
      text-align: center;
      margin-top: 50px;
      margin-bottom: 10px;


      .submit {
        width: 310px;
        height: 36px;
      }
    }
  }

  :deep(.el-date-editor) {
    width: 100%;
    height: 40px;
    line-height: 50px;

    .el-input__inner {
      height: 30%;
    }

    .el-input__icon {
      line-height: inherit;
    }
  }

  .myQuery {
    .title {
      display: flex;
      justify-content: center;
      align-items: center;

      .icon-myNode {
        display: flex;
        width: 20px;
        height: 20px;
        background: url('@/icons/AI.svg') no-repeat center;
        margin-right: 2px;
      }

      .text {
        color: #191919;
        font-size: 17px;
        font-weight: 600;
      }
    }
    .searchDate{
      span{
        font-size: 16px;
        font-weight:600 ;
      }
      .dateClass{
        margin-top: 20px;
      }
    }
    .searchAddr{
      margin-top: 40px;
      span{
        font-size: 16px;
        font-weight:600 ;
      }
      .addrClass{
        margin-top: 20px;
        .textareaInput{
          width: 100%;
          font-size: 16px
        }
      }
    }
    .searchAI{
      margin-top: 40px;
      span{
        font-size: 16px;
        font-weight:600 ;
      }
      .AIClass{
        margin-top: 20px;
        .textareaInput{
          width: 100%;
          font-size: 16px
        }
      }
    }
    .search-button {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: end;
      align-items: center;
      width: 100%;
      height: 50px;
      border-top: 1px solid rgba(0, 0, 0, 0.10);
      background: #FFF;

      button {
        width: 50%;
        height: 100%;
        border-radius: 0;
        border: none;

        &:nth-child(1) {
          border-right: 1px solid rgba(175, 175, 175, 0.466);
        }
      }
    }
  }

  .myNode {
    .title {
      display: flex;
      justify-content: center;
      align-items: center;

      .icon-myNode {
        display: flex;
        width: 20px;
        height: 20px;
        background: url('@/icons/随笔记icon.svg') no-repeat center;
        margin-right: 2px;
      }

      .text {
        color: #191919;
        font-size: 17px;
        font-weight: 600;
      }
    }

    .header {
      display: flex;
      justify-content: space-between;

      .icon-loudou {
        display: flex;
        width: 20px;
        height: 20px;
        background: url('@/icons/漏斗.svg') no-repeat center;
        margin-right: 2px;
      }

      .text {
        font-size: 12px;
        font-weight: 600;
        color: #306EFF;
      }
    }

    .NodeList {
      .NodeItem {
        margin: 20px 0;
        padding: 20px 20px;
        height: 100px;
        border-radius: 8px;
        background: #F2F4F9;

        .title {
          width: 100%;
          display: flex;
          justify-content: start;
          margin-bottom: 10px;

          .city,
          .time {
            margin: 0 5px;
            color: #666;
            text-align: center;
            font-size: 13px;
            font-weight: 600;
          }
        }

        .content {
          color: #191919;
          font-size: 15px;
        }
      }
    }
    .search-button {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: end;
      align-items: center;
      width: 100%;
      height: 50px;
      border-top: 1px solid rgba(0, 0, 0, 0.10);
      background: #FFF;

      button {
        width: 50%;
        height: 100%;
        border-radius: 0;
        border: none;

        &:nth-child(1) {
          border-right: 1px solid rgba(175, 175, 175, 0.466);
        }
      }
    }
  }
}

:deep(.el-checkbox__inner) {
  border-radius: 50%;
}
</style>
